import React from 'react';
import { Table, Space, Form, Select } from 'dw-mx';
import { StringCell, LinkCell } from 'dw-mx-table';
import { Code } from 'dw-mx-extend';
const { Column } = Table;
import './style';

export default function ReadonlyLink() {
    const data = [
        {
            key: '1',
            left: '左对齐',
            right: '右对齐',
            center: '剧中',
        },
    ];
    const onChange = (value) => {
        // 可以监听 onchange
        alert(value);
    };
    
    return (
        <>
            <Table scroll={{ x: 880 }} dataSource={data} bordered>
                <Column
                    ellipsis={true}
                    title="序号"
                    key="no"
                    align={'center'}
                    width={40}
                    render={(value, record, index) => {
                        return <StringCell value={index + 1} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="左对齐"
                    dataIndex="left"
                    key="left"
                    align={'center'}
                    width={120}
                    render={(value, record, index) => {
                        return <LinkCell value={value} align={"left"} onclick={() => window.open("http://www.baidu.com")} style={{fontSize:'20px'}}/>;
                    }}/>
                <Column
                    ellipsis={true}
                    title="右对齐"
                    dataIndex="right"
                    key="right"
                    align={'center'}
                    width={120}
                    render={(value, record, index) => {
                        return <LinkCell value={value} align={'right'} onclick={() => window.open('http://www.baidu.com')} />;
                    }}
                />
                <Column
                    ellipsis={true}
                    title="剧中"
                    dataIndex="center"
                    key="center"
                    align={'center'}
                    width={120}
                    render={(value, record, index) => {
                        return <LinkCell value={value} align={'center'} onclick={() => window.open('http://www.baidu.com')} />;
                    }}
                />
                <Column
                    title="操作"
                    dataIndex="operation"
                    key="operation"
                    width={120}
                    render={(text, record: any, index) => {
                        return (
                            <Space>
                                <a onClick={() => alert('修改')}>修改</a>
                                <a onClick={() => alert('删除')}>删除</a>
                            </Space>
                        );
                    }}
                />
            </Table>
        </>
    );
}
